import { skuOriginalOptions } from '@/pages/commodity/modules/constants/skuInfoModule/skuOptionsList';
import {
  getEchoByOptions,
  getListByReturnMapKey,
  isT4Environment,
} from '@/utils/getUtils';

/**
 * @h h渲染
 * @list 要循环渲染的集合
 * @text el-popover要展示的文本内容
 * @title 悬浮弹框标题
 * @key 循环渲染的item文本key，如果没有就默认展示循环item
*/
const getElPopover = ({ h, list, text, title, key }) => {
  const ulStyle = `padding-left: 15px; max-height: 300px; overflow: hidden; overflow-y: auto;`
  const liStyle = `border-bottom: 1px dashed #ccc; margin-bottom: 10px;`;
  return <el-popover
    placement="right"
    width="300"
    trigger="hover">
    <el-card shadow="never">
      <div slot="header">{title}</div>
      <ul style={ulStyle}>{
        list.map(item => {
          return <li style={liStyle}>{key ? item[key] : item}</li>
        })
      }</ul>
    </el-card>
    <span slot="reference">{text}</span>
  </el-popover>
}

// 获取销售属性列的render
const getRenderBySaleAttrs = (h, row) => {
  const saleAttrInfoList = row?.saleAttrInfoList ?? []
  if (saleAttrInfoList.length == 0) return <span></span>
  return getElPopover({
    h,
    list: saleAttrInfoList,
    text: saleAttrInfoList.join(','),
    title: '销售属性'
  })
}
// 获取基本信息列的render
const getRenderByBasicInfo = (h, row) => {
  if (!row.notSpecAttrInfoList) { return <span>{row.notSpecAttrInfoNum}</span> }
  return getElPopover({
    h,
    list: row.notSpecAttrInfoList,
    text: row.notSpecAttrInfoNum,
    title: '基本信息'
  });
}
// 获取别名信息列的render
const getRenderByAliasName = (h, row) => {
  const aliasNames = getListByReturnMapKey(row.keywordInfoDTO?.aliasInfoList ?? [], 'aliasName');
  if (aliasNames.length === 0) { return <span></span>; }
  return getElPopover({
    h,
    list: row.keywordInfoDTO?.aliasInfoList,
    text: aliasNames.join(','),
    title: '别名',
    key: 'aliasName'
  });
}

// 获取包装层数columns集合
const getPackageLayerColumns = () => {
  const fieldList = [
    { title: '包装单位', key: 'PackageUnit' },
    { title: '数量', key: 'PackageCount' },
    { title: '最长边（cm）', key: 'Edge1' },
    { title: '次长边（cm）', key: 'Edge2' },
    { title: '最短边（cm）', key: 'Edge3' },
    { title: '包装体积（m³）', key: 'Volume' },
    { title: '重量（kg）', key: 'Weight' },
  ]
  const layers = [
    { label: '单品', value: 'single' },
    { label: '一层', value: 'one' },
  ]
  const columns = layers.reduce((value, item) => {
    value.push(...fieldList.map(field => ({
      title: `${item.label}${field.title}`,
      key: `${item.value}${field.key}`
    })))
    return value
  }, [])
  return columns
}

// 审核表列
export const AUDIT_COLUMNS = [
  {
    title: '审核状态',
    key: 'recordMainAuditStateStr'
  },
  {
    title: '驳回类型',
    key: 'recordMainAuditReasonTypeStr'
  },
  {
    title: '驳回原因',
    key: 'recordMainAuditReasonNote'
  },
]

// 商品信息表列
export const TABLE_COLUMNS = [
  {
    title: '四级类名称',
    key: 'categoryName'
  },
  {
    title: '四级类代码',
    key: 'categoryNo'
  },
  {
    title: '是否敏感',
    key: 'isPriceSensitive'
  },
  {
    title: '是否金属制品',
    key: 'isMetal'
  },
  {
    title: 'SPU码',
    key: 'spuNo'
  },
  {
    title: 'SKU码',
    key: 'skuNo'
  },
  {
    title: '商品名称',
    key: 'productName'
  },
  {
    title: '销售属性',
    notShowTip: true,
    render: (h, { row }) => getRenderBySaleAttrs(h, row)
  },
  {
    title: '关键词',
    render: (h, { row }) => <span>{row.keywordInfoDTO?.keywordName ?? ''}</span>
  },
  {
    title: '别名',
    render: (h, { row }) => getRenderByAliasName(h, row)
  },
  {
    title: '基本信息',
    render: (h, { row }) => getRenderByBasicInfo(h, row)
  },
  {
    title: '主计量单位',
    key: 'mainUnit'
  },
  {
    title: '数量小数位',
    key: 'mainDecimal'
  },
  {
    title: '商品类型',
    key: 'productType'
  },
  {
    title: '品牌',
    key: 'brandName'
  },
  {
    title: '系列',
    key: 'brandSeries'
  },
  {
    title: '经营模式',
    key: 'dealMode'
  },
  {
    title: '包装清单',
    key: 'packlist'
  },
  {
    title: '商品管理区域',
    key: 'manageArea'
  },
  {
    title: '合作模式',
    key: 'cooperation'
  },
  {
    title: '售价管理周期',
    key: 'sellManagePeriod'
  },
  {
    title: '档次外部定位',
    key: 'outpos'
  },
  {
    title: '档次内部定位',
    key: 'inpos'
  },
  {
    title: '是否季节性商品',
    key: 'seasonProduct'
  },
  {
    title: '囤货期',
    key: 'stockPeriod'
  },
  {
    title: '下架期',
    key: 'soldoutPeriod'
  },
  {
    title: '售卖平台',
    key: 'saleplat'
  },
  {
    title: '归类名称',
    key: 'classificationName'
  },
  {
    title: '税率',
    key: 'taxRate'
  },
  {
    title: '最小起售量（销售）',
    key: 'saleMin'
  },
  {
    title: '销售限制类型（销售）',
    key: 'saleRestrict'
  },
  {
    title: '安全率（下限 - 上限）',
    key: 'safetyRate'
  },
  {
    title: '件装数量',
    key: 'pieceInfo'
  },
  {
    title: '商品条形码',
    key: 'barcode'
  },
  {
    title: '商品信息备注',
    key: 'skuRemark',
  },
  {
    title: '产地',
    key: 'producingAreaName'
  },
  {
    title: 'Sku来源',
    render: (h, { row }) => <span>{getEchoByOptions(row.skuSource, skuOriginalOptions)}</span>
  },
  {
    title: '来源详情',
    key: 'skuSourceDesc',
  },
  {
    title: '副标题',
    key: 'subtitle'
  },
  {
    title: '包装层数',
    key: 'packageLayers'
  },
  ...getPackageLayerColumns(),
]

// 下次上线前，需要将下面的代码放开
// export const PRODUCT_INFO_COLUMNS = [...AUDIT_COLUMNS, ...TABLE_COLUMNS]

// 由于后端上线延后，当前功能只在t4展示（下次上线前，需要将下面的代码删除）
export const PRODUCT_INFO_COLUMNS = isT4Environment()
  ? [...AUDIT_COLUMNS, ...TABLE_COLUMNS]
  : [...TABLE_COLUMNS]
